<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '个人信息',
  },
}
</route>

<script lang="ts" setup>
// 在信息页面的 script 部分顶部添加
import { useUserStore } from '@/store/user' // 导入用户Store

// 实例化用户Store
const userStore = useUserStore()

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function back() {
  uni.navigateBack()
}

function logout() {
  uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 关键：调用 store 的 removeUserInfo 方法，清除 store 数据和本地存储
        userStore.removeUserInfo()
        // uni.removeStorageSync('token')
        uni.reLaunch({
          url: '/pages/mine/index',
        })
      }
    },
  })
}

const user = computed(() => {
  const storeInfo = userStore.userInfo
  return {
    nickName: storeInfo.username || '微信用户', // 用username作为昵称，默认值兜底
    avatar: storeInfo.avatar || '/static/images/default-avatar.png', // 头像地址，默认图兜底
    phoneNumber: storeInfo.phoneNumber || '13877778888', // 手机号，默认值兜底
  }
})

// 修改手机号
function changePhone() {
//   uni.makePhoneCall({
//     phoneNumber: user.phoneNumber,
//   })
}

function changeNickName() {
  // #ifdef MP-WEIXIN
  // 调用微信获取用户信息接口
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
    success: (res) => {
      if (res.userInfo) {
        // 更新用户昵称
        user.value.nickName = res.userInfo.nickName
      }
    },
    fail: (err) => {
      console.error('获取用户信息失败', err)
    },
  })
  // #endif

  // #ifndef MP-WEIXIN
  // 非微信平台保持原逻辑
  uni.showModal({
    title: '修改昵称',
    content: '请输入新的昵称',
    editable: true, // 使模态框可输入
    success: (res) => {
      if (res.confirm && res.content) {
        user.value.nickName = res.content
      }
    },
  })
  // #endif
}

// 修改头像
function changeAvatar() {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      if (res.tempFilePaths.length > 0) {
        user.value.avatar = res.tempFilePaths[0]
      }
    },
  })
}
</script>

<template>
  <view class="box-border min-h-[100vh] overflow-hidden bg-[#f4f4f4]">
    <!-- 导航栏 -->
    <view class="fixed top-0 z-20 w-full transition-all duration-300" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
      <view class="h-11 flex items-center px-4">
        <wd-icon name="thin-arrow-left" color="white" size="22px" @click="back" />
        <h1 class="flex-1 truncate px-6 text-lg text-white font-medium">
          个人信息
        </h1>
      </view>
    </view>
    <!-- 资料卡区域 -->
    <view
      :style="{ marginTop: `${safeAreaInsets?.top}px` }"
      class="bg-[linear-gradient(to_bottom,#a4bec7,#f4f4f4)]"
    >
      <!-- 间隔槽占位 -->
      <view :style="{ height: `${safeAreaInsets?.top + 70}px` }" />
      <!-- 头像区域 -->
      <view class="relative z-10 mb-[-88rpx] text-center">
        <image class="h-22 w-22 rounded-full" :src="user.avatar" mode="aspectFill" @click="changeAvatar" />
      </view>
      <!-- 卡片区域 -->
      <wd-card>
        <view class="h-15" />
        <wd-cell-group>
          <wd-cell title="昵称">
            <view class="custom-text" @click="changeNickName">
              {{ user.nickName }}
            </view>
          </wd-cell>
          <wd-cell title="手机号" clickable :value="user.phoneNumber" @click="changePhone" />
          <wd-cell title="油车港文旅用户服务协议" title-width="400rpx" is-link to="/pages/agreement/userAgreement" />
          <wd-cell title="油车港文旅消费者隐私政策" title-width="400rpx" is-link to="/pages/agreement/privacyPolicy" replace />
        </wd-cell-group>
        <view class="mb-2 mt-30 text-center">
          <wd-button type="warning" plain hairline @click="logout">
            退出登录
          </wd-button>
          <view class="h-10" />
        </view>
      </wd-card>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
